<template>
  <div>
    <div class="foot_list">
      <ul class="icon-text-list">
        <li v-for="(text, index) in text" :key="index">
          <img :src="icons[index]" class="icon" />
          <span>{{ text }}</span>
        </li>
      </ul>
    </div>
    <div class="foot_phone">
      <div class="foot_item1">
        <h6>商城客服热线</h6>
        <p>
          <img src="@/assets/time_footer.png" alt="" />商城服务时间: 09:00 -
          18:00
        </p>
        <p><img src="@/assets/mobile_footer.png" alt="" />400-8899-618</p>
      </div>
      <div class="foot_item1">
        <h6>企业购热线</h6>
        <p>
          <img src="@/assets/time_footer.png" alt="" />
          团购服务时间: 09:00 - 18:00
        </p>
        <p><img src="@/assets/mobile_footer.png" alt="" />0755-83286903</p>
      </div>
      <div class="foot_item1">
        <h6>售后服务热线</h6>
        <p>
          <img src="@/assets/time_footer.png" alt="" />
          售后热线时间: 09:00 - 20:00
        </p>
        <p>
          <img src="@/assets/mobile_footer.png" alt="" />
          400-6788-688
        </p>
      </div>
      <div class="foot_item1">
        <h6>在线客服咨询</h6>
        <p>
          <img src="@/assets/time_footer.png" alt="" />
          服务时间: 09:00 - 22:00
        </p>
        <p>
          <img src="@/assets/mobile_footer.png" alt="" />
          在线客服 即时答疑
        </p>
      </div>
    </div>
    <div class="foot_order">
      <div class="foot_order_left">
        <div class="foot_order_list1">
          <ul class="custom-list">
            <li class="list-title"><a>新手指引</a></li>
            <li><a>交易须知</a></li>
            <li><a>开具发票</a></li>
            <li><a>联系客服</a></li>
            <li><a>会员登录小贴士</a></li>
          </ul>
          <ul class="custom-list">
            <li class="list-title"><a>支付及配送</a></li>
            <li><a>在线支付</a></li>
            <li><a>运费政策</a></li>
            <li><a>配送方式</a></li>
          </ul>
          <ul class="custom-list">
            <li class="list-title"><a>订单及售后</a></li>
            <li><a>订单说明</a></li>
            <li><a>退款说明</a></li>
            <li><a>售后政策</a></li>
            <li><a>售后申请</a></li>
          </ul>
          <ul class="custom-list">
            <li class="list-title"><a>关于顺电</a></li>
            <li><a>品牌故事</a></li>
            <li><a>投资者关系</a></li>
            <li><a>联系方式</a></li>
            <li><a>网站合作</a></li>
            <li><a>仓库招租</a></li>
          </ul>
        </div>
        <div class="foot_order_text">
          <p class="text_p1">友情链接</p>
          <p>顺电B2B<span>设乡味</span></p>
        </div>
      </div>
      <div class="foot_order_right">
        <p class="mengdian">门店体验店</p>
        <p class="shenzhen">
          深圳市顺电连锁股份有限公司，是一家专门销售家用电器(包括手机、电脑、数码相机)的零售商。顺电每一家门店有以下特点:高品质商品、丰富选择、专业服务。
        </p>
        <div class="foot_order_right_list">
          <ul class="foot_order_right_list_ul">
            <li><a>北京</a></li>
            <li><a>广州</a></li>
            <li><a>苏州</a></li>
            <li><a>上海</a></li>
            <li><a>深圳</a></li>
            <li><a>更多</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="foot_shuoming">
      <p class="copyright">
        <a href="javascript:;" class="icp">粤ICP备13052236号 |</a>
        <a href="">营业执照</a>
        <a href="">增值电信营业许可证</a>
      </p>
      <p>Copyright 2002-2025. 深圳市顺电连锁股份有限公司 版权所有</p>
      <div class="foot_list2">
        <ul class="icon-text-list2">
          <li v-for="(text, index) in text2" :key="index">
            <img :src="icons2[index]" class="icon2" />
            <span>{{ text }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyFoot",
  data() {
    return {
      text: ["正品保证", "会员尊享", "全国联保", "30天退货", "正规发票"],
      icons: [
        require("@/assets/zp.png"),
        require("@/assets/vip_footer.png"),
        require("@/assets/bao.png"),
        require("@/assets/30.png"),
        require("@/assets/Awesome-Projects.png"),
      ],
      text2: ["网上报警", "深圳市公安局", "工商网监", "关注微博", "顺电购物"],
      icons2: [
        require("@/assets/footimg1.png"),
        require("@/assets/footimg2.png"),
        require("@/assets/footimg3.png"),
        require("@/assets/footimg4.png"),
        require("@/assets/footimg6.png"),
      ],
    };
  },
};
</script>

<style scoped>
.foot_list {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  background-color: #f0f0f0;
}
.icon-text-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  margin: 0px auto;
  padding: 30px;
}
.icon-text-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.icon {
  width: 42px;
  height: 42px;
  margin-right: 15px;
}
.foot_phone {
  width: 1200px;
  height: 130px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 0px auto;
  border-bottom: 1px solid gainsboro;
  padding-bottom: 30px;
}
.foot_item1 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: start;
  height: 130px;
  width: 300px;
  margin: 0px 30px;
}
.foot_order {
  display: flex;
  flex-direction: row;
  width: 1200px;
  height: 345px;
  margin: 30px auto;
  border-bottom: 1px solid gainsboro;
}
.foot_order_left {
  display: flex;
  flex-direction: column;
  width: 800px;
  margin-top: 40px;
}
.foot_order_list1 {
  display: flex;
  flex-direction: row;
}
.foot_order_list1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

.custom-list {
  list-style: none;
  padding: 0;
  margin: 0 15px;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.custom-list li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.custom-list li:first-child {
  font-weight: bold;
  margin-bottom: 15px;
}

.custom-list a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.custom-list a:hover {
  color: #0066cc;
  text-decoration: underline;
}
.foot_order_text {
  text-align: start;
  padding-left: 13px;
  line-height: 40px;
}
.foot_order_text span {
  padding-left: 20px;
}
.text_p1 {
  font-weight: bold;
}
.foot_order_right {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 20px;
  width: 450px;
  background-image: url("@/assets/footer_ji.png");
  background-size: 80%;
  background-position: 75px 35px;
  background-repeat: no-repeat;
  border-radius: 4px;
  margin: -20px;
}

.mengdian {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin: 0px 0px 10px 0px;
}

.shenzhen {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 63px;
  text-align: left;
}
.foot_order_right_list {
  width: 200px;
  margin: 0;
}
.foot_order_right_list_ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 10px 0;
}

.foot_order_right_list_ul li {
  text-align: left;
  padding-left: 10px;
}
.copyright {
  margin: 0;
  padding: 10px 0;
}
.copyright a {
  text-decoration: none;
  margin-right: 15px;
  color: #333;
}

.copyright a.icp {
  color: #0099a8;
}
.copyright a:last-child {
  margin-right: 0;
}
.foot_list2 {
  width: 100%;
  margin: 15px 0; 
}
.icon-text-list2 {
  display: flex;
  justify-content: center; 
  align-items: center; 
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-text-list2 li {
  display: flex;
  align-items: center; 
  margin: 0 10px;
  position: relative;
}
.icon-text-list2 li:not(:last-child)::after {
  content: "|"; 
  color: #999; 
  margin-left: 20px; 
  font-size: 16px;
}
.icon2 {
  width: 35px; 
  height: 35px;
  margin-right: 8px; 
  object-fit: contain;
}
.icon-text-list2 span {
  font-size: 16px;
  color: #666; 
  white-space: nowrap;
}
.foot_shuoming{
    height: 200px;
}
</style>